<template>
  <div class="common-layout">
    <el-container>
      <!--头部-->
      <el-header>
        <el-menu
            :default-active="activeIndex"
            class="HomeChoose"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
            router
        >
          <el-menu-item index="0">
            <img
                style="width: 60px"
                src="../assets/logo.png"
                alt="SC logo"
            />
          </el-menu-item>
          <div class="flex-grow"/>
          <el-menu-item index="home">
            <el-icon>
              <House/>
            </el-icon>
            首页
          </el-menu-item>
          <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.name}}</span></template>
            <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name">
              <el-icon>
                <component :is="child.icon"></component>
              </el-icon>
              {{child.name}}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="announcement">
            <el-icon>
              <Help/>
            </el-icon>
            我的消息
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon>
              <Phone/>
            </el-icon>
            联系我们
          </el-menu-item>


          <div class="IDpicture">
            <el-input v-model="input2" class="searchFunction" placeholder="请输入搜索的功能">
              <template #suffix>
                <el-icon class="el-input__icon">
                  <search/>
                </el-icon>
              </template>
            </el-input>
            <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
        </el-menu>

      </el-header>

      <el-main>
        <el-row>
          <el-image style="width: 200px; height: 50px;margin-left: 8%;margin-top: 1%"
                    :src="require('@/assets/NEUSOFT.png')" :fit="fit"/>
        </el-row>

        <el-container style="border-radius:1px;border: 2px solid #FCFCFC;box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.1); width: 90%; height: 7%;margin: auto;margin-top: 2%">
          <div style="font-family: '爱奇艺黑体 Medium', sans-serif; font-size: 21px; font-weight: normal;margin-left: 40px;margin-top: 12px">我的钱包</div>
        </el-container>
        <el-container    style="border-radius:1px;border: 2px solid #FCFCFC;box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3); width: 90%; height: 70%;margin: auto;margin-top: 2%">
          <el-aside width="38%">
            <div style="display:flex;justify-content: center;margin-top: 10%;font-family: 黑体, sans-serif; font-size: 25px; font-weight: lighter">余额</div>
            <el-row>
              <el-image style="width: 300px; height: 200px;margin-left: 25%;margin-top: 1%"
                        :src="require('@/assets/wallet.png')" :fit="fit"/>
            </el-row>
            <div style="display:flex;justify-content: center;margin-top: 3%;font-family: 黑体, sans-serif; font-size: 26px; font-weight: lighter">{{store.getters.getMoney}}.00元</div>
            <div style="margin-top: 7%">
              <span style="margin-left: 32%;"><el-button  style="width: 80px;border-color: #333333 "@click="Pay" type="">充值</el-button></span>
              <span style="margin-left: 8%"><el-button  style="width: 80px;border-color: #333333" @click="ContinuePay" type="">提现</el-button></span>
            </div>
          </el-aside>
          <el-divider style="height: 100%" direction="vertical" />
          <el-container>
            <el-header style="padding: 0;background-color: #FCFCFC;border-radius: 1px;height: 45%">
              <div style="margin-top: 6%;margin-left: 7%;font-family: 黑体, sans-serif; font-size: 25px; font-weight: lighter">最近三个月消费统计</div>
              <el-row style="margin-top: 4%;margin-left: 7%;font-family: 黑体, sans-serif; font-size: 20px; font-weight: lighter">
                <el-col :span="6"><div>充值金额</div></el-col>
                <el-col :span="6"><div>消费金额</div></el-col>
                <el-col :span="6"><div>平台返现</div></el-col>
              </el-row>
              <el-row style="margin-top: 2%;margin-left: 7%;font-family: 黑体, sans-serif; font-size: 40px; font-weight: lighter">
                <el-col :span="5"><div>+0.00</div></el-col>
                <el-col :span="7" style="padding-left: 20px;"><div>-{{total}}.00</div></el-col>
                <el-col :span="8"><div>+0.00</div></el-col>
              </el-row>
            </el-header>
            <el-divider style="width: 100%;"/>
            <el-main style="border-radius: 1px">
              <el-row style="margin-top: 1%;margin-left: 5%;font-family: 黑体, sans-serif; font-size: 20px; font-weight: lighter">
                <el-col :span="6"><div>钱包支付订单数</div></el-col>
                <el-col :span="6"><div>钱包支付优惠</div></el-col>
              </el-row>
              <el-row style="margin-top: 2%;margin-left: 10%;font-family: 黑体, sans-serif; font-size: 40px; font-weight: lighter">
                <el-col :span="5"><span>{{walletNum}}</span><span style=" font-size: 20px; font-weight: lighter">单</span></el-col>
                <el-col :span="7"><span style="padding-left: 20px;">0.00</span></el-col>
              </el-row>
            </el-main>
          </el-container>
        </el-container>
        <el-container style="border-radius:1px;border: 2px solid #FCFCFC;box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.1); width: 90%; height: 60%;margin: auto;margin-top: 2%">
          <el-header style="padding: 0;background-color: #FFFFFF;border-radius: 1px;height: 100%">
            <div style="font-family: '爱奇艺黑体 Medium', sans-serif; font-size: 21px; font-weight: normal;margin-left: 40px;margin-top: 20px">钱包明细</div>
            <el-divider style="width: 98%;margin-left: 1%"/>
            <el-table :data="walletMoney" style="width: 98%;height: 78%;border-radius: 20px;margin-left: 15px"
                      :header-cell-style="{ backgroundColor: '#F1F1F1', color: 'Black', fontSize: '14px',fontWeight:'light', textAlign: 'center' }"
                      empty-text="没有消费记录~">
              <el-table-column prop="payTime" label="时间" width="400px" align="center"/>
              <el-table-column prop="userIncome" label="收入" width="00px" align="center"/>
              <el-table-column prop="userPayout" label="支出" width="00px" align="center"/>
              <el-table-column prop="outState" label="详细说明" width="400px" align="center">
              </el-table-column>
            </el-table>
          </el-header>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import *as allGoodsAPI from "../api/goods";
import {onMounted, ref,computed} from 'vue'
import {useStore} from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'


function formatDate(isoDate) {
  const date = new Date(isoDate);
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // getMonth() 返回的是从 0 开始的月份，所以需要加 1
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 构建格式化后的字符串
  const formattedDate = `${year}年${month}月${day}日${hours}:${minutes}:${seconds}`
  return formattedDate;
}
const selectedItem = ref([])
const selectedCarts=ref([])
const walletMoney=ref([])
const store=useStore()
const goods = ref([])
const activeIndex = ref('1')
const handleSelect = (index) => {
  activeIndex.value = index;
}


//页头多级菜单
const menu_data = ref([
  {
    name: '物业服务',
    icon: 'OfficeBuilding',
    path: '/community',
    child: [
      {
        name: '物业费缴纳',
        icon: 'ChatRound',
        path: '/stratafees',
      },
      {
        name: '车位管理',
        icon: 'Pointer',
        path: '/park',
      },
      {
        name: '报事维修',
        icon: 'ChatRound',
        path: '/maintenance',
      },
      {
        name: '事项投诉',
        icon: 'ChatRound',
        path: '/complaints',
      },
      {
        name: '访客登记',
        icon: 'ChatRound',
        path: '/visitor',
      },
    ]
  },
  {
    name: '商城',
    icon: 'Goods',
    path: '/shop',
    child: [
      {
        name: '商城首页',
        icon: 'Goods',
        path: '/shophome',
      },
      {
        name: '我的收藏',
        icon: 'Goods',
        path: '/collect',
      },
      {
        name: '我的购物车',
        icon: 'Goods',
        path: '/shoppingcart',
      },
      {
        name: '我的订单',
        icon: 'Goods',
        path: '/order',
      },
      {
        name: '我的钱包',
        icon: 'Goods',
        path: '/wallet',
      }
    ]
  },

])

const  total = computed(()=>{
  let myTotal=0;
  console.log(walletMoney.value)
  walletMoney.value.forEach((walletMoney)=>{
    console.log(walletMoney.walletId)
    myTotal += Number(walletMoney.userPayout)
    console.log(myTotal)
  })
  return myTotal;
})

const  walletNum = computed(()=>{
  let walletNum=0;
  console.log(walletMoney.value)
  walletMoney.value.forEach((walletMoney)=>{
    console.log(walletMoney.walletId)
    walletNum+=1
  })
  return walletNum;
})

onMounted(() => {

  allGoodsAPI.allWallet({userId:store.getters.getId}).then((res)=>{
    walletMoney.value=res.data;
    let total=0;
    for (let i = 0; i < walletMoney.value.length; i++) {

      console.log(total)
      walletMoney.value[i].payTime = formatDate(walletMoney.value[i].payTime)
      const item = walletMoney.value[i];
      // 修改payType
      if (item.outState === "0") {
        console.log("我是物业费")
        item.outState = '物业费';
      } else if (item.outState === "1") {
        item.outState = '购物';
      }
      else if (item.outState ==="2 ") {
        item.outState = '已发货';
      }

    }
  })

})

const addSlash = (url) => {
  return `/${url}`
}

</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.common-layout .el-container {
  width: 100%;
  height: 100%;
}

.common-layout .el-header {
  background-color: white;
  height: 8%;
}

.common-layout .el-main {
  background-color: #FCFCFC;
  height: 90%;
  width: 100%;
}

.searchGoods {
  width: 46%;
  height: 50px;
  margin-left: 8%;
  margin-top: 30px;
  border-radius: 50px;
}

.searchFunction {
  height: 28px;
  width: 80%;
  right: 40px;
}
/*头部边框阴影*/


.HomeChoose {
  height: 100%;
  border: none;
  padding: 0;
  box-shadow: 0px 2px 0px 0 rgba(0, 0, 0, 0.1);
  display: flex;
}

.flex-grow {
  flex-grow: 0;
}

.IDpicture {
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 让头像与其他内容分开排列 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: 48%; /* 调整左右内边距 */
}
.card-margin{
  margin-right: 40px;
}
</style>